<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html id="home" lang="en">

<head>
    <script>
        if(!location.hash.replace('#', '').length) {
            location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
            location.reload();
        }
    </script>

    <title>Customizing Bandwidth using RTCMultiConnection | Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script>
    (function() {
        var params = {},
            r = /([^&=]+)=?([^&]*)/g;

        function d(s) {
            return decodeURIComponent(s.replace(/\+/g, ' '));
        }

        var match, search = window.location.search.toLowerCase();
        while (match = r.exec(search.substring(1)))
            params[d(match[1])] = d(match[2]);

        window.params = params;
    })();

    if (!params.audio) {
        location.href = location.href.replace(location.search, '') + '?audio=30&video=256';
    }
    </script>
    <style>
    @import url(https://fonts.googleapis.com/css?family=Inconsolata);
    html {
        background: #eee;
    }
    
    body {
        font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
        font-size: 1.2em;
        line-height: 1.2em;
        margin: 0;
    }
    
    article,
    footer {
        display: block;
        max-width: 900px;
        min-width: 360px;
        width: 80%;
    }
    
    article {
        background: #fff;
        border: 1px solid;
        border-color: #ddd #aaa #aaa #ddd;
        margin: 2.5em auto 0 auto;
        padding: 2em;
    }
    
    h1 {
        margin-top: 0;
    }
    
    article p:first-of-type {
        margin-top: 1.6em;
    }
    
    article p:last-child {
        margin-bottom: 0;
    }
    
    footer {
        margin: 0 auto 2em auto;
        text-align: center;
    }
    
    footer a {
        color: #666;
        font-size: inherit;
        padding: 1em;
        text-decoration: none;
        text-shadow: 0 1px 1px #fff;
    }
    
    footer a:hover,
    footer a:focus {
        color: #111;
    }
    
    h1,
    h2 {
        border-bottom: 1px solid black;
        display: inline;
        font-weight: normal;
        line-height: 36px;
        padding: 0 0 3px 0;
    }
    
    a {
        color: #2844FA;
        text-decoration: none;
    }
    
    a:hover,
    a:focus {
        color: #1B29A4;
    }
    
    a:active {
        color: #000;
    }
    
    :-moz-any-link:focus {
        border: 0;
        color: #000;
    }
    
    ::selection {
        background: #ccc;
    }
    
    ::-moz-selection {
        background: #ccc;
    }
    
    button,
    select {
        -moz-border-radius: 3px;
        -moz-transition: none;
        -webkit-transition: none;
        background: #0370ea;
        background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
        background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
        border: 1px solid #076bd2;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-family: inherit;
        font-size: .8em;
        line-height: 1.3;
        padding: 5px 12px;
        text-align: center;
        text-shadow: 1px 1px 1px #076bd2;
    }
    
    button:hover {
        background: rgb(9, 147, 240);
    }
    
    button:active {
        background: rgb(10, 118, 190);
    }
    
    button[disabled] {
        background: none;
        border: 1px solid rgb(187, 181, 181);
        color: gray;
        text-shadow: none;
    }
    
    strong {
        color: rgb(204, 14, 14);
        font-family: inherit;
        font-weight: normal;
    }
    
    select {
        color: black;
        text-shadow: none;
    }
    
    td {
        vertical-align: top;
    }
    
    #chat-output div,
    #file-progress div {
        border: 1px solid black;
        border-bottom: 0;
        padding: .1em .4em;
    }
    
    input {
        border: 1px solid black;
        font-family: inherit;
        margin: .1em .3em;
        outline: none;
        padding: .1em .2em;
        width: 97%;
    }
    
    #chat-output,
    #file-progress {
        margin: 0 0 0 .4em;
        max-height: 12em;
        overflow: auto;
    }
    
    pre {
        border-left: 2px solid red;
        margin-left: 2em;
        padding-left: 1em;
    }
    
    .video-container {
        background: white;
        border: 2px solid black;
        border-radius: 0.2em;
        display: inline-block;
        margin: 2em .2em;
        padding: .1em;
        vertical-align: top;
    }
    
    .video-container h2 {
        border: 0;
        border-top: 1px solid black;
        display: block;
        margin: 0;
        text-align: center;
    }
    
    .eject {
        background-image: url('https://www.webrtc-experiment.com/images/eject.png') !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        border-color: white;
        border-radius: 0;
        height: 30px;
        margin: .2em;
        position: absolute;
        width: 30px;
        z-index: 200;
    }
    </style>
    <!-- for HTML5 el styling -->
    <script>
    document.createElement('article');
    document.createElement('footer');
    </script>
    <script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
    <script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
    <script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
</head>

<body>
    <article>
        <a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid #2844FA; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">↑WEBRTC EXPERIMENTS</a>

        <h1>Customizing Bandwidth using <a href="https://github.com/muaz-khan/RTCMultiConnection" target="_blank">RTCMultiConnection</a></h1>

        <p>
            <span>Copyright ©</span>
            <a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>
            <span>&lt;</span><a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>
            <span>&gt;.</span>

        </p>

        <section>
            <h2>New Session:</h2>

            <button id="start-new-session">Start New Video Session</button>
        </section>
        <table style="border-left: 1px solid black; width: 100%;">
            <tr>
                <td id="local-video-container">
                    <h2>Local video container</h2>

                </td>
                <td id="remote-videos-container" style="background: white; border-left: 1px solid black;">
                    <h2>Remote videos container
                    </h2>

                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table id="sessions-list" style="width: 100%;"></table>
                </td>
            </tr>
        </table>
        <script>
        window.username = Math.random() * 9999 << 9999;

        connection = new RTCMultiConnection('bandwidth-customization');

        // https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
        var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
        connection.openSignalingChannel = function(config) {
            var channel = config.channel || connection.channel || 'default-namespace';
            var sender = Math.round(Math.random() * 9999999999) + 9999999999;

            io.connect(SIGNALING_SERVER).emit('new-channel', {
                channel: channel,
                sender: sender
            });

            var socket = io.connect(SIGNALING_SERVER + channel);
            socket.channel = channel;

            socket.on('connect', function() {
                if (config.callback) config.callback(socket);
            });

            socket.send = function(message) {
                socket.emit('message', {
                    sender: sender,
                    data: message
                });
            };

            socket.on('message', config.onmessage);
        };

        connection.bandwidth = {
            audio: params.audio || 50,
            video: params.video || 256
        };

        sessionsList = document.getElementById('sessions-list');
        connection.onNewSession = function(session) {
            alreadyExists = document.getElementById(session.userid);
            if (alreadyExists) return;

            if (!window.sessions) window.sessions = {};
            window.sessions[session.userid] = session;

            tr = document.createElement('tr');
            tr.innerHTML = '<td>' + session.extra.username + '</td>';

            td = document.createElement('td');

            button = document.createElement('button');
            button.setAttribute('id', session.userid);
            button.innerHTML = 'join';

            td.appendChild(button);
            tr.appendChild(td);
            sessionsList.insertBefore(tr, sessionsList.firstChild);

            button.onclick = function() {
                if (!window.username) window.username = prompt('Please enter your username') || 'Anonymous';

                session = window.sessions[this.id];

                connection.extra = {
                    username: window.username
                };
                connection.join(session);

                document.getElementById('start-new-session').disabled = true;
                sessionsList.style.display = 'none';
            };
        };

        document.getElementById('start-new-session').onclick = function() {
            if (!window.username) window.username = prompt('Please enter your username') || 'Anonymous';

            connection.extra = {
                username: window.username
            };
            connection.open();

            document.getElementById('start-new-session').disabled = true;
            sessionsList.style.display = 'none';
        };

        connection.onstream = function(e) {
            if (e.type === 'local') {
                e.extra = {
                    username: window.username
                };

                video = getVideo(e);
                document.getElementById('local-video-container').appendChild(video);
            }

            if (e.type === 'remote') {
                video = getVideo(e);
                remoteVideosContainer = document.getElementById('remote-videos-container');
                remoteVideosContainer.appendChild(video, remoteVideosContainer.firstChild);
            }
            e.mediaElement.width = innerWidth / 3.4;
        };

        connection.onleave = function(e) {
            if (e.extra) console.log(e.extra.username + ' left you!');

            video = document.getElementById(e.userid);
            if (video) video.parentNode.removeChild(video);
        };

        // this line must be called both for initiator and participants
        connection.connect();

        function getVideo(e) {
            div = document.createElement('div');
            div.className = 'video-container';
            div.id = e.userid || 'self';

            if (e.type === 'remote') {
                if (connection.isInitiator) {
                    eject = document.createElement('button');
                    eject.className = 'eject';
                    eject.title = 'Eject this User';

                    eject.onclick = function() {
                        connection.eject(this.parentNode.id);
                        this.parentNode.style.display = 'none';
                    };
                    div.appendChild(eject);
                }
            }
            div.appendChild(e.mediaElement);

            if (e.extra) {
                h2 = document.createElement('h2');
                h2.innerHTML = e.extra.username;
                div.appendChild(h2);
            }
            return div;
        }
        </script>

        <br/>

        <p style="color: red; text-align: center;">You can customize bandwidth using URL parameters!</p>

        <br/>

        <h2 id="go">Go ahead and try <a href="https://github.com/muaz-khan/RTCMultiConnection" target="_blank">RTCMultiConnection</a>!</h2>

        <p>Pass "session-id" only-over the constructor:</p>
        <pre>
connection = new RTCMultiConnection('session-id'); 
connection.bandwidth = { 
    audio: 50, 
    video: 256 
}; 
connection.open();
</pre>

        <br/>
        <br/>
        <h2>What is <a href="https://github.com/muaz-khan/RTCMultiConnection" target="_blank">RTCMultiConnection</a>?</h2>

        <br/>
        <br/>RTCMultiConnection.js a javascript library supports features like audio/video conferencing; (one-way and one-to-many) broadcasting; screen sharing; data/text/file sharing (of any size); multi-and-manual sessions establishment; users ejection, rejection and presence detection; and more. It automatically keeps session "active" all the time; even if initiator leaves.
        <br/>
        <br/>
        <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
            <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>

            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>
    </article>
    <footer>
        <p> <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a>© <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>,
            <span>2013 </span>» <a href="mailto:muazkh@gmail.com" target="_blank">Email</a>»
            <a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>» <a href="https://github.com/muaz-khan" target="_blank">Github</a>

        </p>
    </footer>
    <script>window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';</script>
    <script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</body>

</html>